<template>
  <view
    @click="emits('click', $event)"
    class="flex flex-col"
    :class="[colWidth ? '' : 'flex-1']"
    :style="[colWidth ? { width: colWidth + 'rpx' } : '']"
  >
    <view
      :eventPenetrationEnabled="true"
      :style="[
        TmRowGutter
          ? { marginLeft: `${TmRowGutter}rpx`, marginRight: `${TmRowGutter}rpx` }
          : '',
        props.height ? { height: props.height + 'rpx' } : '',
        !transprent ? tmcomputed.backgroundColorCss : '',
        { alignItems: alignComputed, justifyContent: 'center' },
        customCSSStyle,
      ]"
      :class="['flex flex-col', customClass]"
      ><slot></slot
    ></view>
  </view>
</template>

<script lang="ts" setup>
/**
 * 单元格
 * @description 必须配置tmRow使用。否则报错。
 */
import {
  getCurrentInstance,
  computed,
  ref,
  provide,
  inject,
  onUpdated,
  onMounted,
  onUnmounted,
  nextTick,
  watch,
} from "vue";
import { cssstyle, tmVuetify, colorThemeType } from "../../tool/lib/interface";
import {
  custom_props,
  computedTheme,
  computedClass,
  computedStyle,
  computedDark,
} from "../../tool/lib/minxs";
import { useTmpiniaStore } from "../../tool/lib/tmpinia";
const store = useTmpiniaStore();
const emits = defineEmits(["click"]);
const props = defineProps({
  ...custom_props,
  height: {
    type: [Number, String],
    default: 50,
  },
  color: {
    type: String,
    default: "white",
  },
  transprent: {
    type: [Boolean, String],
    default: false,
  },
  align: {
    type: String,
    default: "center", //'start' | 'center' | 'end'
  },
});
// 设置响应式全局组件库配置表。
const tmcfg = computed<tmVuetify>(() => store.tmStore);
//自定义样式：
const customCSSStyle = computed(() => computedStyle(props));
//自定类
const customClass = computed(() => computedClass(props));
//是否暗黑模式。
const isDark = computed(() => computedDark(props, tmcfg.value));
//计算主题
const tmcomputed = computed<cssstyle>(() =>
  computedTheme(props, isDark.value, tmcfg.value)
);
const TmRowWidth = inject(
  "TmRowWidth",
  computed(() => 0)
);
const TmRowColumn = inject(
  "TmRowColumn",
  computed(() => 0)
);
const TmRowGutter = inject(
  "TmRowGutter",
  computed(() => 0)
);
const colWidth = computed(() => {
  if (TmRowWidth.value == 0) return 0;
  return TmRowWidth.value / TmRowColumn.value;
});
//横向对齐方式
enum justifyAlign {
  start = "flex-start",
  end = "flex-end",
  center = "center",
}
const alignComputed = computed(() => justifyAlign[props.align]);
// 设置响应式主题文字色。
let textColor = computed(() => tmcomputed.value.textColor);
provide("appTextColor", textColor);
</script>
